import QtQuick
import FluentUI
import QtQuick.Controls

// 历史数据
FluRectangle {
    radius: [25, 25, 25, 25]
    width: mainWindow.width * 0.53
    height: mainWindow.height * 0.35
    color: "#FFFFFF"

    Row {
        y: parent.height * 0.02
        anchors.left: parent.left
        anchors.right: parent.right
        Text {
            anchors.left: parent.left
            anchors.margins: 25
            text: "历史数据"
            font.pointSize: 9 * fontSizeFactor
            font.family: "MiSans"
            font.weight: Font.DemiBold
            color: "#0A1629"
        }

        Text {
            anchors.right: parent.right
            anchors.margins: 25
            text: "截止时间：2024/10/3 08:16"
            font.pointSize: 9 * fontSizeFactor
            font.family: "MiSans"
            color: "#0A1629"
        }
    }

    Column {
        anchors.fill: parent
        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.15
            color: "transparent"
        }
        // 次数统计
        FluRectangle {
            width: parent.width * 0.93
            height: parent.height * 0.3
            color: "#F9FBFF"
            radius: [12, 12, 12, 12]
            anchors.horizontalCenter: parent.horizontalCenter

            Row {
                anchors.fill: parent
                // 占位
                Rectangle {
                    width: parent.width * 0.0325
                    height: parent.height
                    color: "transparent"
                }
                // 总次数
                FluRectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * 0.161
                    height: parent.height * 0.8
                    color: "transparent"
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            text: "15"
                            font.pointSize: 15 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            color: "#0A1629"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "总次数"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.0325
                    height: parent.height
                    color: "transparent"
                }
                // 今日次数
                FluRectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * 0.161
                    height: parent.height * 0.8
                    color: "transparent"
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            text: "1"
                            font.pointSize: 15 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            color: "#0A1629"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "今日练习"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.0325
                    height: parent.height
                    color: "transparent"
                }
                // 刷题数量
                FluRectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * 0.161
                    height: parent.height * 0.8
                    color: "transparent"
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            text: "150"
                            font.pointSize: 15 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            color: "#0A1629"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "刷题数量"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.0325
                    height: parent.height
                    color: "transparent"
                }
                // 错题数量
                FluRectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * 0.161
                    height: parent.height * 0.8
                    color: "transparent"
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            text: "30"
                            font.pointSize: 15 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            color: "#0A1629"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "错题数量"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.0325
                    height: parent.height
                    color: "transparent"
                }
                // 待处理错题数
                FluRectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * 0.161
                    height: parent.height * 0.8
                    color: "transparent"
                    Column {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Text {
                            text: "5"
                            font.pointSize: 15 * fontSizeFactor
                            font.family: "MiSans"
                            font.weight: Font.DemiBold
                            color: "#0A1629"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                        Text {
                            text: "待处理错题"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }
                }
            }
        }
        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.05
            color: "transparent"
        }
        // 图表
        FluRectangle {
            width: parent.width * 0.93
            height: parent.height * 0.45
            color: "transparent"
            anchors.horizontalCenter: parent.horizontalCenter

            Row {
                anchors.fill: parent
                // 占位
                Rectangle {
                    width: parent.width * 0.03
                    height: parent.height
                    color: "transparent"
                }

                // 最近成绩文字
                FluRectangle {
                    width: parent.width * 0.2
                    height: parent.height
                    color: "transparent"
                    Column {
                        anchors.fill: parent
                        // 占位
                        Rectangle {
                            width: parent.width
                            height: parent.height * 0.2
                            color: "transparent"
                        }
                        Text {
                            text: "近期平均成绩"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#7D8592"
                        }
                        Text {
                            text: "92.15"
                            font.pointSize: 20 * fontSizeFactor
                            font.family: "MiSans"
                            color: "#0A1629"
                        }

                        Row {
                            spacing: parent.width * 0.05
                            Text {
                                text: "今日较昨日"
                                font.pointSize: 9 * fontSizeFactor
                                font.family: "MiSans"
                                color: "#7D8592"
                            }
                            FluImage {
                                anchors.verticalCenter: parent.verticalCenter
                                height: parent.height * 0.5
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/image/image/RisingArrow.png"
                            }
                            Text {
                                text: "10%"
                                font.pointSize: 9 * fontSizeFactor
                                font.family: "MiSans"
                                color: "#7D8592"
                            }
                        }
                    }
                }

                // 占位
                Rectangle {
                    width: parent.width * 0.03
                    height: parent.height
                    color: "transparent"
                }

                // 图表
                FluChart {
                    id: chart
                    width: parent.width * 0.7
                    height: parent.height
                    chartType: 'line'
                    chartData: { return {
                        labels: ['10/10', '10/11', '10/12', '10/13', '10/14'],
                        datasets: [{
                            label: '分数',
                            data: [98, 78, 88, 90, 95],
                            fill: false,
                            borderColor: '#3F8CFF',
                            tension: 0.5
                        }, {
                            label: '转化率',
                            data: [90, 76, 85, 92, 93],
                            fill: false,
                            borderColor: '#00D097',
                            tension: 0.5
                        }]
                    }
                    }
                    chartOptions: { return {
                        maintainAspectRatio: false,
                        tooltips: {
                            mode: 'index',
                            intersect: false
                        }
                    }
                    }
                    Component.onCompleted: {
                        parent.widthChanged.connect(updateSize);
                        parent.heightChanged.connect(updateSize);
                    }

                    function updateSize() {
                        width = parent.parent.width * 0.7;
                        height = parent.parent.height;
                    }
                }
            }
        }
    }
}
